import React from 'react'
import styleObj from '@/static/scss/index.scss'
import 'bootstrap/dist/css/bootstrap.css'
class CommentList extends React.Component {
	constructor() {
		super()
		this.state = {
			commentList: [
				{
					id: 1,
					user: '张三',
					content: 'hahahaha',
				},
				{
					id: 2,
					user: '李四',
					content: 'xswl',
				},
			],
		}
	}
	handelClick() {
		let len = this.state.commentList.length
		let user = this.refs.user.value
		let content = this.refs.content.value
		this.state.commentList.push({
			id: len + 1,
			user: user,
			content: content,
		})
		this.setState({
			commentList: this.state.commentList,
		})
	}
	render() {
		return (
			<div className='container'>
				<h3 className={styleObj['comment-title']}>评论</h3>
				<div className='form-group'>
					<label htmlFor='exampleInputEmail1'>评论人</label>
					<input type='email' className='form-control' ref='user' />
				</div>
				<div className='form-group'>
					<label htmlFor='exampleInputEmail1'>评论内容</label>
					<input type='email' className='form-control' ref='content' />
				</div>
				<button type='button' className='btn btn-primary' onClick={() => this.handelClick()}>
					添加
				</button>
				{this.state.commentList.map((item) => (
					<div className={('card', styleObj['comment-item'])} key={item.id}>
						<h5>评论人:{item.user}</h5>
						<p>说:{item.content}</p>
					</div>
				))}
			</div>
		)
	}
}

export default CommentList
